<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习-轮播图</title>
		<style>
		img{
			width: 500px;
			height: 400px;
		}
		button{
			width:50px;
			height: 80px;
			background-color: black;
			opacity: 0.6;
			color: #FFFFFF;
			position: absolute;
			top:260px
		}
		</style>
		<script src="js/vue.js"></script>
	</head>
	<body>
		要求：将页面上显示的图片进行切换，
		点击左侧的箭头，图片向左滑动显示上一张		
		点击右侧的箭头，图片向右滑动显示下一张
		若当前图片为第一张，则左侧的箭头隐藏不见
		若当前图片为最后张，则右侧的箭头隐藏不见
		<div id="app">
			<button @click="leftImg()" v-show="leftButton">&lt;</button>
			<img  :src="imgSrc[index]"/>
			<button @click="rightImg()" v-show="rightButton">&gt;</button>
			
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				imgSrc:["img/bg1.jpg",
				"img/bg2.jpg",
				"img/bg3.jpg",
				"img/bg4.jpg",
				"img/bg5.jpg",
				"img/bg6.jpg",
				"img/bg7.jpg",
				"img/bg8.jpg",
				"img/bg9.jpg",
				"img/bg10.jpg"],
				index:0,
				leftButton:false,
				rightButton:true
			},
			methods:{
				leftImg:function(){
					this.rightButton=true
					this.index--
					if(this.index==0){
						this.leftButton=false
					}
					
				},
				rightImg:function(){
					this.leftButton=true
					this.index++
					if(this.index==9){
						this.rightButton=false
					}
					
				}
				
			}
			
		})
		</script>
		
	</body>
</html>
